<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-23 14:36:44"
-->
<template>
  <v-container>
    <v-data-table
    dense
    show-select
    v-model='tableSelected'
    :loading='tableLoading'
    :headers='tableHeaders'
    :items='tableItems'
    must-sort
    :options.sync='tableOptions'
    :server-items-length='tableItemsTotal'
    :footer-props='{
      showFirstLastPage: true,
      showCurrentPage: true,
      itemsPerPageOptions: [5, 10, 20 , 50]
    }'>
      <template v-slot:top>
        <v-row dense>
          <v-col cols='12'>
            <v-btn text color='accent' @click='fetchData'><v-icon small>refresh</v-icon>刷新</v-btn>
            <v-btn text color='primary'><v-icon small>add</v-icon>新增</v-btn>
            <v-btn text color='error' :disabled='tableSelected.length <= 0' @click='deleteItemHandle(tableSelected)'><v-icon small>close</v-icon>删除</v-btn>
            <v-divider></v-divider>
          </v-col>
          <v-col cols='9'>
            <v-form ref='searchField'>
              <v-text-field
              dense
              label='请输入搜索内容！'
              hide-details
              prepend-inner-icon='search'
              color='secondary'
              clearable
              solo-inverted
              flat
              v-model='tableSearch'></v-text-field>
            </v-form>
          </v-col>
          <v-col cols='3'>
            <v-btn color='primary' @click='fetchData'><v-icon>search</v-icon>搜索</v-btn>
            <v-btn text @click='$refs.searchField.reset()'><v-icon>refresh</v-icon>重置</v-btn>
          </v-col>
          <v-col cols='12' v-show='tableSelected.length > 0'>
            <span>已选中<span class='primary--text font-weight-black'>{{tableSelected.length}}</span>条记录</span>
          </v-col>
        </v-row>
      </template>
      <template v-slot:item.id='{ item }'>
        {{item.id}}
      </template>
      <template v-slot:item.actions='{ item }'>
        <v-tooltip top>
          <template v-slot:activator='{ on }'>
            <v-btn :disabled='false' v-on='on' @click='deleteItemHandle([item])' color='red' text small icon><v-icon>delete</v-icon></v-btn>
          </template>
          <span>删除</span>
        </v-tooltip>
      </template>
    </v-data-table>
  </v-container>
</template>
<script>
import * as API from '@/api/admin/comment.js'
export default {
  name: 'Comment',
  components: {},
  data: function () {
    return {
      tableHeaders: [
        { text: 'id', value: 'id' },
        { text: '评论', value: 'comment' },
        { text: '标题', value: 'path' },
        { text: '操作', value: 'actions', align: 'center' }
      ],
      tableLoading: true,
      tableItems: [],
      tableOptions: {
        page: 1,
        itemsPerPage: 20,
        sortBy: [ 'id' ],
        sortDesc: [ true ]
      },
      tableSearch: '',
      tableSelected: [],
      tableItemsTotal: 0
    }
  },
  created: function () {
  },
  computed: {},
  watch: {
    tableOptions: {
      handler () {
        this.fetchData()
      },
      deep: true
    }
  },
  methods: {
    fetchData() {
      this.tableLoading = true
      API.fetchList({
        sort: this.tableOptions.sortBy[0],
        descending: this.tableOptions.sortDesc[0],
        page: this.tableOptions.page,
        page_size: this.tableOptions.itemsPerPage,
        search: {}
      }).then(res => {
        this.tableItems = res.data.data
        this.tableItemsTotal = res.data.total
      }).finally(() => {
        this.tableLoading = false
      })
    },
    resetBtn: function() {
      this.refs.searchField.reset()
    },
    deleteItemHandle: function(items) {
      if (confirm('是否确定删除？删除后无法恢复，请慎重！')) {
        API.deleteOne(items.map(e => e.id).join('_')).then(res => {
          // const index = this.tableItems.indexOf(item)
          // this.tableItems.splice(index, 1)
          this.fetchData()
          this.$toasted.success(res.data)
        }).catch(err => {
          return Promise.reject(err)
        })
      }
    }
  }
}
</script>
<style scoped>
</style>
